<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			/* 画圆 */
			#d1{
				width: 500px;
				height: 500px;
				/* 画圆 ：背景色  画框 */
				background-color: #00007f;
				/* 边框倒角条件  ：边框或者背景色 */
				border-radius: 50%;
				/* 微调定位 */
				position: relative;
				left:75px;
				top:-3px;
				animation: heart .6s linear infinite;
			}
			#d2{
			width: 400px;
			height: 400px;
			/* 画圆 ：背景色  画框 */
			background-color: #ff5500;
			/* 边框倒角条件  ：边框或者背景色 */
			border-radius: 50%;	
			/* 定位属性：元素定位到页面上 */
			/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
			position: relative;
			left: 50px;/* x轴：横向 */
			top: 50px;/* y轴：纵轴 */
			animation: heart .6s linear infinite;
			}
			#d3{
			width: 300px;
			height: 300px;
			/* 画圆 ：背景色  画框 */
			background-color: #ffff7f;
			/* 边框倒角条件  ：边框或者背景色 */
			border-radius: 50%;
			/* 定位属性：元素定位到页面上 */
			/* 相对定位：相对于父级元素进行定位；网页x,y轴 */
			position: relative;
			left: 50px;/* x轴：横向 */
			top: 50px;/* y轴：纵轴 */
			animation: heart .6s linear infinite;
			}
			/* 棍子 */
			p{
				width: 40px;
				background-color: #f5ff35;
				height: 500px;
				/* 倾斜 转换属性  旋转值 */
				transform: rotate(-33deg);
				/* 微调定位 */
				position: relative;
				left:564px ;
				top: -114px;
				animation: heart .6s linear infinite;
			}
			@keyframes heart{
				0%{
					/* 缩放 转换属性   属性值 scale(代表等比例  1以下缩小  1以上放大)*/
					transform:rotate(1deg) scale(0.6);
				}
				30%{
					transform:rotate(135deg) scale(.8);
				}
				100%{
					transform:rotate(135deg) scale(1.2);
				}
		</style>
	</head>
	<body>
		<!-- 画三个圆 -->
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		<!-- 画棍 -->
		<p></p>
	</body>
</html>